<template>
  <div class="flex flex-col min-h-screen bg-gray-100 text-gray-800">
    <header class="text-2xl font-bold p-4 flex justify-center items-center">
      <div class="absolute left-5">
        <div class="flex flex-row items-center">
          <span>{{ currentTime }}</span>
          <div class="flex flex-row text-sm ml-4">
            <span class="mx-2">{{ currentWeek }}</span>
            <span>{{ currentDate }}</span>
          </div>
        </div>
      </div>
      <span>第三师经济运行数据监测可视化展板</span>
    </header>

    <main class="flex-1 mx-auto p-3 w-full grid grid-rows">
      <!-- 后续布局 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="flex flex-col">
          <OutputValue />
          <IndustrialStructure />
          <GeneralPublicBudget />
        </div>
        <div class="flex flex-col">
          <SocialConsumerGoods />
          <ActualPopulation />
          <RegisteredPopulation />
        </div>
        <div class="flex flex-col">
          <NewBorn />
          <AccuNewEmpNum />
          <ConsumptionMarket />
        </div>
      </div>
    </main>

    <footer class="bg-white py-4 px-6 text-center text-sm border-t">
      <p>© 2025 政务服务和大数据局. 保留所有权利.</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import OutputValue from './components/OutputValue.vue'
import AccuNewEmpNum from './components/AccuNewEmpNum.vue'
import SocialConsumerGoods from './components/SocialConsumerGoods.vue'
import IndustrialStructure from './components/IndustrialStructure.vue'
import ConsumptionMarket from './components/ConsumptionMarket.vue'
import ActualPopulation from './components/ActualPopulation.vue'
import NewBorn from './components/NewBorn.vue'
import GeneralPublicBudget from './components/GeneralPublicBudget.vue'
import RegisteredPopulation from './components/RegisteredPopulation.vue'
import { onMounted, onUnmounted, ref } from 'vue'
const currentTime = ref('')
const currentWeek = ref('')
const currentDate = ref('')
const timer = ref<any>(null)

/** 刷新时间 */
function refreshTime() {
  const now = new Date()
  // 修正时区问题，强制使用本地时区
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
    timeZone: 'Asia/Shanghai', // 明确指定时区为上海（中国标准时间）
  })

  // 获取星期
  const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  currentWeek.value = weekday[now.getDay()]
  // 获取当前日期
  currentDate.value = now.toISOString().split('T')[0] // 格式: YYYY-MM-DD
}

onMounted(() => {
  refreshTime()
  timer.value = setInterval(refreshTime, 1000)
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* 卡片通用样式 - 亮色主题 */
.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
/* 修正后的图表标题样式选择器 */
.text-lg.font-bold {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

/* 数据展示卡片样式 */
.data-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.data-card h2 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.data-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.data-label {
  font-size: 0.875rem;
  color: #666;
}

/* 组件样式 */
.unit {
  font-size: 12px;
  color: #999999;
  margin-left: 5px;
}

/* 确保各组件在grid布局中正确展示，防止溢出等问题 */
main > div > * {
  width: 100%;
}
header {
  color: #393939;
  background: #d3dee8;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-track-piece {
  background-color: #f8f8f800;
}
::-webkit-scrollbar {
  width: 16px;
  transition: all 2s;
}
::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
::-webkit-scrollbar-corner {
  background-color: rgba(255, 255, 255, 0);
}
</style>
